<script lang="ts">
import Senpy from "$lib/Data/senpy";
import Message from "$lib/Loading/Message.svelte";
import Skeleton from "$lib/Loading/Skeleton.svelte";
import locale from "$stores/locale";
import "$styles/girls.scss";
import type { PageData } from "./$types";

export let data: PageData;
</script>

<div class="card">
  {#await Senpy.getImages(data.language)}
    <Message message={$locale().routes?.girlsLoadingImages} />

    <Skeleton grid={true} count={1} width="49%" height="16.25em" />
  {:then images}
    <div class="images">
      {#each images as image}
        <a href={image} target="_blank">
          <div class="preview">
            <img src={image} alt={$locale().routes?.girlsSingleAlt} />
          </div>
        </a>
      {/each}
    </div>
  {/await}
</div>

<style lang="scss">
  .images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.25em, 1fr));
    gap: 1em;

    img {
      border-radius: 8px;
      width: 100%;
    }
  }
</style>
